<script>
import { reactive, toRefs } from "vue";

export default {
  props: ["tabId"],
  setup(props) {
    // console.log(props);
    // 1.构建数据格式 data中
    const todolists = reactive({
      tabId: props.tabId,
    });
    return {
      ...toRefs(todolists),
    };
  },
};
</script>

<template>
  <div>
    <div class="container">
      <div class="container-wrap">
        <div class="justify-between bg">
          <router-link custom to="/" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 1 }]"
            >
              <div :class="tabId == 1 ? 'homes' : 'home'"></div>
              <span>直播</span>
            </div>
          </router-link>
          <router-link custom to="/info" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 2 }]"
            >
              <div :class="tabId == 2 ? 'infos' : 'info'"></div>
              <span>社区</span>
            </div>
          </router-link>
          <router-link custom to="/match" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 3 }]"
            >
              <div :class="tabId == 3 ? 'navmatch' : 'navmatchs'"></div>
              <span style="margin-top: 37px">赛事</span>
            </div>
          </router-link>
          <router-link custom to="/attent" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 4 }]"
            >
              <div :class="tabId == 4 ? 'attents' : 'attent'"></div>
              <span>关注</span>
            </div>
          </router-link>
          <router-link custom to="/my" v-slot="{ href, navigate }"
            ><div
              :href="href"
              @click="navigate"
              :class="['div', { con: tabId == 5 }]"
            >
              <div :class="tabId == 5 ? 'mys' : 'my'"></div>
              <span>我的</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.bg {
  height: 89px;
  background-size: 100%;
  background-image: url(../assets/img/botNav.png);
}
.home {
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url(../assets/img/home01.png);
}
.navmatch {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 62px;
  height: 62px;
  background-size: 100%;
  background-image: url(../assets/img/navmatch01.png);
}
.attent {
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url(../assets/img/attent01.png);
}
.my {
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url(../assets/img/my01.png);
}
.info {
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url(../assets/img/info01.png);
}
.homes {
  width: 44px;
  height: 44px;
  background-size: 100%;
  background-image: url(../assets/img/home02.png);
}
.homes {
  width: 44px;
  height: 44px;
  background-size: 100%;
  background-image: url(../assets/img/home02.png);
}
.navmatchs {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 62px;
  height: 62px;
  background-size: 100%;
  background-image: url(../assets/img/navmatch02.png);
}
.infos {
  width: 44px;
  height: 44px;
  background-size: 100%;
  background-image: url(../assets/img/info02.png);
}
.mys {
  width: 44px;
  height: 44px;
  background-size: 100%;
  background-image: url(../assets/img/my02.png);
}
.attents {
  width: 44px;
  height: 44px;
  background-size: 100%;
  background-image: url(../assets/img/attent02.png);
}
.container-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 750px;
  min-width: none;
  // padding: 8px 15px;
  .justify-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
    margin-right: auto;
    margin-left: auto;

    .div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #d679a6;
      width: 60px;
      font-size: 10px;
      font-weight: 700;

      span {
        margin-top: 5px;
      }
      &.router-link-active {
        .iconfont {
          color: #6839e8;
        }
        span {
          color: #6839e8;
        }
      }
    }
    .con {
      color: #f7b723;
    }
  }
}
</style>